<template>
  <div>
    <!-- 子Tab -->
    <el-tabs v-model="activeSubTab" type="card" class="sub-tabs">
      <el-tab-pane label="排名展示" name="rank-display">
        <template #label>
          <div class="flex items-center">
            <div class="i-mdi:trophy w-4 h-4 mr-2 text-yellow-500"></div>
            <span>排名展示</span>
          </div>
        </template>
      </el-tab-pane>

      <el-tab-pane label="分数差距分析" name="score-gap">
        <template #label>
          <div class="flex items-center">
            <div class="i-mdi:chart-line w-4 h-4 mr-2 text-blue-500"></div>
            <span>分数差距分析</span>
          </div>
        </template>
      </el-tab-pane>
    </el-tabs>

    <!-- 内容区域 -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
      <div v-if="activeSubTab === 'rank-display'">
        <RankDisplay 
          :rank-data="rankData" 
          :dimensions="rankDimensions" 
          :default-dimension="'class'" 
          @dimension-change="handleDimensionChange"
          ref="rankDisplayRef" 
        />
      </div>
      <div v-else-if="activeSubTab === 'score-gap'">
        <ScoreGapAnalysis 
          :gap-data="gapData" 
          :dimensions="rankDimensions" 
          :default-dimension="'class'" 
          @dimension-change="handleDimensionChange"
          ref="scoreGapRef" 
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import RankDisplay from './RankDisplay.vue'
import ScoreGapAnalysis from './ScoreGapAnalysis.vue'

// 当前激活的子Tab
const activeSubTab = ref('rank-display')

// 组件引用
const rankDisplayRef = ref(null)
const scoreGapRef = ref(null)

// 排名维度配置
const rankDimensions = [
  {
    key: 'class',
    name: '班级排名'
  },
  {
    key: 'grade',
    name: '年级排名'
  },
  {
    key: 'major',
    name: '专业排名'
  }
]

// 静态排名数据
const rankData = {
  class: {
    currentRank: 8,
    totalStudents: 45,
    totalScore: 425,
    maxScore: 500,
    averageScore: 398,
    rankPercentage: '17.8%'
  },
  grade: {
    currentRank: 156,
    totalStudents: 1200,
    totalScore: 425,
    maxScore: 500,
    averageScore: 385,
    rankPercentage: '13.0%'
  },
  major: {
    currentRank: 23,
    totalStudents: 180,
    totalScore: 425,
    maxScore: 500,
    averageScore: 392,
    rankPercentage: '12.8%'
  }
}

// 静态分数差距数据
const gapData = {
  class: {
    gapToTop5: 25,
    avgGapToTop5: 15,
    gapToTop10: 18,
    avgGapToTop10: 12,
    gapToBottom5: 32,
    avgGapToBottom5: 20,
    gapToBottom10: 28,
    avgGapToBottom10: 18,
    gapToFirst: 35,
    gapToThird: 22,
    gapToFifth: 15,
    gapToTenth: 8,
    leadToFifteenth: 12,
    leadToTwentieth: 18,
    leadToTwentyFifth: 25,
    leadToThirtieth: 32,
    shortTermGoal: '努力缩小与前5名的差距，争取进入前10名',
    mediumTermGoal: '稳定保持在前10名，争取进入前5名',
    longTermGoal: '冲击前3名，成为班级顶尖学生'
  },
  grade: {
    gapToTop5: 45,
    avgGapToTop5: 28,
    gapToTop10: 32,
    avgGapToTop10: 22,
    gapToBottom5: 58,
    avgGapToBottom5: 35,
    gapToBottom10: 48,
    avgGapToBottom10: 28,
    gapToFirst: 65,
    gapToThird: 42,
    gapToFifth: 28,
    gapToTenth: 15,
    leadToFifteenth: 22,
    leadToTwentieth: 35,
    leadToTwentyFifth: 48,
    leadToThirtieth: 62,
    shortTermGoal: '在年级中保持前15%的位置',
    mediumTermGoal: '争取进入年级前10%',
    longTermGoal: '冲击年级前5%，成为年级优秀学生'
  },
  major: {
    gapToTop5: 38,
    avgGapToTop5: 25,
    gapToTop10: 28,
    avgGapToTop10: 18,
    gapToBottom5: 45,
    avgGapToBottom5: 28,
    gapToBottom10: 38,
    avgGapToBottom10: 22,
    gapToFirst: 52,
    gapToThird: 35,
    gapToFifth: 22,
    gapToTenth: 12,
    leadToFifteenth: 18,
    leadToTwentieth: 28,
    leadToTwentyFifth: 38,
    leadToThirtieth: 48,
    shortTermGoal: '在专业中保持前12%的位置',
    mediumTermGoal: '争取进入专业前8%',
    longTermGoal: '冲击专业前5%，成为专业优秀学生'
  }
}

// 处理维度变化
const handleDimensionChange = (dimension) => {
  console.log('维度变化:', dimension)
  // 可以在这里添加其他逻辑，比如重新获取数据等
}
</script>

<style lang="scss" scoped>
// 子Tab样式
:deep(.sub-tabs) {
  .el-tabs__content {
    padding: 20px;
  }
}
:deep(.el-tabs__content) {
  padding: 0 !important;
}
</style> 